<template>
  <div class="releaseHouse">
    <div class="form">
      <div class="form-item">
        <i-input
          type="number"
          title="租金"
          placeholder="请输入租金"
          :value="formItem.money"
          @change="moneyChange" />
      </div>
      <div class="form-item">
        <CustomInput
          title="地址"
          placeholder="请填写地址"
          :value="formItem.address"
          @inputClick="customInputClick" />
      </div>
      <div class="form-item">
        <picker
          mode="date"
          :value="formItem.checkInTime"
          @change="checkInTimeChange">
          <CustomInput
            title="入住时间"
            placeholder="请选择入住时间"
            :value="formItem.checkInTime" />
        </picker>
      </div>
      <div class="form-item">
        <i-cell title="允许短租">
          <i-switch
            slot="footer"
            :value="formItem.isShortRent"
            @change="isShortRentChange"></i-switch>
        </i-cell>
      </div>
      <div class="form-item">
        <div class="uploadImg clear">
          <div class="title pull-left">照片</div>

          <div class="content pull-left">
            <div class="remind">请勿盗图套图，避免封号</div>
            <div class="imgs clear">
              <div
                v-if="formItem.uploadImg && formItem.uploadImg.length"
                class="uploadImgs pull-left"
                :class="{ isNeedWdith: formItem.uploadImg.length > 2 }">
                <scroll-view
                  scroll-x
                  class="uploadImgs-scrollView">
                  <div class="uploadImgs-list">
                    <div
                      v-for="(item, index) in formItem.uploadImg"
                      class="uploadImgs-detail"
                      :key="item"
                      @tap="scaleImg(item)"
                      @longpress="deleteImg(index)">
                      <img class="img" mode="aspectFit" :src="item" />
                    </div>
                  </div>
                </scroll-view>
              </div>
              <div class="uploadIcon pull-left" @tap="uploadImgClick">
                <div class="iconfont icon-tianjiatupian"></div>
                <div>添加照片</div>
              </div>
            </div>
            <div v-if="formItem.uploadImg && formItem.uploadImg.length" class="deleteRemind">长按图片以删除</div>
          </div>
        </div>
      </div>
      <div class="form-item">
        <CustomInput
          title="房源描述"
          placeholder="请填写房源描述"
          :value="formItem.houseDesc"
          @inputClick="customInputClick" />
      </div>
      <div class="form-item">
        <picker
          mode="multiSelector"
          :range="houseTypeData"
          :value="houseType"
          @change="houseTypeChange">
          <CustomWrapInput
            title="户型（请选择房源的实际户型，不可修改）"
            placeholder="请选择户型"
            :isInput="false"
            :value="formItem.houseType" />
        </picker>
      </div>
      <div class="form-item">
        <picker
          :range="elevatorData"
          :value="isElevator"
          @change="elevatorChange">
          <CustomWrapInput
            title="电梯（选填）"
            placeholder="请选择是否有电梯"
            :isInput="false"
            :value="formItem.isElevator" />
        </picker>
      </div>
    </div>

    <div class="sure clear">
      <button class="button pull-right" @tap="buttonClick">保存并下一步</button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import CustomInput from 'components/CustomInput/CustomInput'
import CustomWrapInput from 'components/CustomWrapInput/CustomWrapInput'
// import { releaseHouseTypeData } from 'common/js/modules'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    CustomInput,
    CustomWrapInput
  },
  computed: {
    ...mapState([
      'releaseAddress',
      'releaseDesc'
    ])
  },
  watch: {
    releaseAddress (newAddress) {
      this.changeAddress(newAddress)
    },
    releaseDesc (newDesc) {
      this.changeDesc(newDesc)
    }
  },
  created () {
    this.addressFormat = ['city', 'roadDesc']
  },
  data () {
    return {
      formItem: {
        money: null,
        address: '',
        checkInTime: '',
        isShortRent: false,
        uploadImg: [],
        houseDesc: '',
        houseType: '',
        isElevator: null
      },
      houseType: [],
      // houseTypeData: releaseHouseTypeData(),
      elevatorData: ['有电梯', '无电梯'],
      isElevator: null
    }
  },
  methods: {
    buttonClick () {
      console.log(this.formItem)
    },
    moneyChange (e) {
      this.formItem.money = e.target.detail.value
    },
    changeAddress (newAddress) {
      this.formItem.address = ''

      this.addressFormat.map(key => {
        if (newAddress[key]) {
          this.formItem.address += `${newAddress[key]} `
        }
      })
    },
    changeDesc (newDesc) {
      this.formItem.houseDesc = newDesc
    },
    customInputClick (title) {
      let url = ''
      switch (title) {
        case '地址':
          url = 'releaseAddress'
          break
        case '房源描述':
          url = 'releaseDesc'
          break
      }
      wx.navigateTo({ url: `/pages/${url}/main` })
    },
    checkInTimeChange (e) {
      this.formItem.checkInTime = e.target.value
    },
    isShortRentChange (e) {
      this.formItem.isShortRent = e.target.value
    },
    uploadImgClick () {
      wx.chooseImage({
        success: res => {
          const paths = res.tempFilePaths
          this.formItem.uploadImg = [...this.formItem.uploadImg, ...paths]
        }
      })
    },
    scaleImg (item) {
      wx.previewImage({
        urls: this.formItem.uploadImg,
        current: item
      })
    },
    deleteImg (index) {
      wx.showModal({
        title: '提示',
        content: '确定要删除该图片吗？',
        success: res => {
          if (res.confirm) {
            this.formItem.uploadImg && this.formItem.uploadImg.splice(index, 1)
          }
        }
      })
    },
    houseTypeChange (e) {
      this.houseType = e.target.value
      const arr = []
      this.houseTypeData.map((item, index) => {
        arr.push(item[this.houseType[index]])
      })
      this.formItem.houseType = arr.join(' / ')
    },
    elevatorChange (e) {
      this.isElevator = e.target.value
      this.formItem.isElevator = this.elevatorData[this.isElevator]
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~common/scss/color';

  .releaseHouse {
    padding-bottom: 15px;
    > .form {
      > .form-item {
        border-bottom: 1px solid rgb(238, 238, 238);
        > .uploadImg {
          font-size: 14px;
          padding: 7px 15px;
          > .title {
            width: 75px;
            color: #495060;
          }
          > .content {
            width: calc(100% - 75px);
            > .remind {
              color: rgb(219, 219, 219);
              margin-bottom: 15px;
            }
            > .imgs {
              width: 100%;
              overflow: hidden;
              > .uploadImgs {
                height: 80px;
                overflow: hidden;
                padding-right: 5px;
                box-sizing: border-box;
                &.isNeedWdith {
                  width: calc(100% - 80px);
                }
                .uploadImgs-scrollView {
                  width: 100%;
                  height: 100%;
                  position: relative;
                  .uploadImgs-list {
                    width: 100%;
                    height: 100%;
                    white-space: nowrap;
                    .uploadImgs-detail {
                      display: inline-block;
                      width: 80px;
                      height: 80px;
                      border-radius: 5px;
                      margin-right: 5px;
                      position: relative;
                      &:nth-last-of-type(1) {
                        margin-right: 0;
                      }
                      > .img {
                        width: 100%;
                        height: 100%;
                        border-radius: 5px;
                        overflow: hidden;
                      }
                    }
                  }
                }
              }
              > .uploadIcon {
                width: 80px;
                height: 80px;
                border-radius: 5px;
                background-color: rgb(243, 245, 248);
                text-align: center;
                color: rgb(143, 143, 143);
                padding-top: 10px;
                box-sizing: border-box;
                > .iconfont {
                  color: rgb(174, 174, 174);
                  font-size: 30px;
                  margin-bottom: 2px;
                }
              }
            }
            > .deleteRemind {
              margin-top: 15px;
              color: rgb(219, 219, 219);
            }
          }
        }
      }
    }
    > .sure {
      margin-top: 15px;
      margin-right: 15px;
      > .button {
        width: 150px;
        background-color: $color-default;
        border-radius: 20px;
        color: white;
        font-size: 16px;
      }
    }
  }
</style>
